<template>
  <!-- new店铺销售查询 -->
  <div class="global-topList pt-16">
    <div class="top_wrap">
      <!-- 直营店 -->
      <template v-if="whatState === '直营'">
        <span class="mr-8">店铺</span>
        <el-input
          class="update-input store_input mr-8"
          v-model="user"
          disabled
        ></el-input>
      </template>
      <!-- 其他店铺 -->
      <template v-else>
        <span class="mr-8">店铺</span>
        <el-select
          v-model="params.directSaleNo"
          clearable
          placeholder="请选择"
          class="mr-8"
          @change="changeDirectSaleNo"
        >
          <el-option
            v-for="item in customerList"
            :key="item.no"
            :label="item.no + ' ' + item.name"
            :value="item.no"
          >
          </el-option>
        </el-select>
      </template>
      <span class="mr-8">序号</span>
      <el-input
        class="update-input mr-8"
        v-model="params.vipSellSequence"
      ></el-input>
      <span class="mr-8">VIP</span>
      <el-select
        v-model="params.vip"
        clearable
        placeholder="请选择"
        class="mr-8"
      >
        <el-option
          v-for="item in vipList"
          :key="item.id"
          :label="item.phone + ' ' + item.name"
          :value="item.phone"
        >
        </el-option>
      </el-select>
      <span class="mr-8">款号</span>
      <el-input
        class="update-input mr-8"
        v-model="params.kindsNumber"
      ></el-input>
      <span class="mr-8">营业员</span>
      <el-select
        v-model="params.personnelName"
        clearable
        placeholder="请选择"
        class="mr-8"
      >
        <el-option
          v-for="item in personnelList"
          :key="item.id"
          :label="item.personnelName"
          :value="item.personnelName"
        >
        </el-option>
      </el-select>
      <span class="mr-8">品牌</span>
      <el-select
        v-model="params.brandedName"
        clearable
        placeholder="请选择"
        class="mr-8"
      >
        <el-option
          v-for="item in brandedList"
          :key="item.id"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
      <div class="pt-16">
        <span class="mr-8">单据状态</span>
        <el-select v-model="params.affirm" placeholder="请选择" class="mr-8">
          <el-option
            v-for="item in confirmList"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span class="mr-8">日期</span>
        <el-date-picker
          class="picker_data"
          v-model="dateTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          @change="hanldeChangeTime"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="bottom_wrap pt-16">
      <div class="el_bottom_wrap">
        <div class="left_bottom">
          <el-button type="primary" icon="el-icon-search" @click="hanldeSearch"
            >查询</el-button
          >
          <template v-if="whatState === '直营'">
            <el-button
              icon="el-icon-folder-checked"
              :disabled="confirmBtnState"
              @click="hanldeSaveClick"
              >确认</el-button
            >
            <el-button
              icon="el-icon-check"
              @click="handleUnfoldClick"
              :disabled="SettlementState"
              >结算</el-button
            >
            <el-button
              icon="el-icon-folder-add"
              :disabled="newSingleBtnState"
              @click="handleUnfoldClick"
              >补单</el-button
            >
            <el-button icon="el-icon-upload2" @click="exportExcel"
              >导出</el-button
            >
            <el-button icon="el-icon-delete" @click="hanldeRowDetlete"
              >删除</el-button
            >
          </template>
        </div>
        <div class="right_bottom">
          <div class="tip" style="background-color: #87c997"></div>
          <span>已完成</span>
          <div class="tip" style="background-color: #ff3130"></div>
          <span>未确定</span>
          <div class="tip" style="background-color: #7d4083"></div>
          <span>未结账</span>
          <el-checkbox-group
            v-model="checked"
            size="mini"
            @change="handelCheckbox"
          >
            <el-checkbox label="二维" border></el-checkbox>
          </el-checkbox-group>
        </div>
      </div>

      <!-- 表格 -->
      <div class="el_table_wrap">
        <div class="left_table_wrap">
          <el-table
            :summary-method="getList"
            show-summary
            ref="left_table"
            :data="leftDataList"
            style="width: 100%"
            :header-cell-style="{
              background: '#f4f4f4',
              padding: 0,
              height: '40px'
            }"
            :cell-style="{ padding: 0, height: '26px' }"
            highlight-current-row
            border
            @cell-click="chooseCellClick"
            height="65vh"
          >
            <!-- fixed -->
            <el-table-column prop="date" label="已结账">
              <template slot-scope="scope">
                <!-- 未确认 -->
                <div class="tip_wrap" v-if="scope.row.sequenceStatus === 0">
                  <div class="tip" style="background-color: #ff3130"></div>
                  <span>{{ scope.row | invoicedStatus }}</span>
                </div>
                <!-- 已完成 -->
                <div class="tip_wrap" v-if="scope.row.sequenceStatus === 2">
                  <div class="tip" style="background-color: #87c997"></div>
                  <span>{{ scope.row | invoicedStatus }}</span>
                </div>
                <!-- 未结账 -->
                <div class="tip_wrap" v-if="scope.row.sequenceStatus === 4">
                  <div class="tip" style="background-color: #7d4083"></div>
                  <span>{{ scope.row | invoicedStatus }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="affirmStatue" label="已确认">
              <template slot-scope="scope">
                <span> {{ scope.row | affirmStatus }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="vipSellSequence" label="单号" width="130px">
            </el-table-column>
            <el-table-column prop="sellTime" label="日期" width="130px">
            </el-table-column>
            <el-table-column prop="number" label="数量" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="money" label="金额" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="zip" label="抹零" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="receiveCashMoney"
              label="收现"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="personnelNames"
              label="营业员"
              show-overflow-tooltip
              width="130px"
            >
            </el-table-column>
            <el-table-column
              prop="integralNumber"
              label="积分"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="remark" label="备注" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="vip"
              label="VIP"
              show-overflow-tooltip
              width="130px"
            >
            </el-table-column>
            <el-table-column prop="vip" label="单据类型">
              <template slot-scope="scope">
                <span>{{ scope.row | sequenceType }}</span>
                <!-- <span>{{ scope.row }}</span> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="right_table_wrap">
          <el-table
            :summary-method="getList2"
            show-summary
            ref="right_table"
            :data="rightDataList"
            style="width: 100%"
            :header-cell-style="{
              background: '#f4f4f4',
              padding: 0,
              height: '40px'
            }"
            :cell-style="{ padding: 0, height: '26px' }"
            highlight-current-row
            border
            height="65vh"
          >
            <template v-for="(item, _index) in tableConfig">
              <template
                v-if="!isDimensional && whatState !== '直营' && !item.isShow"
              >
                <el-table-column
                  :key="_index"
                  :prop="item.prop"
                  :label="item.label"
                  :width="item.width"
                >
                </el-table-column>
              </template>
              <template
                v-else-if="
                  !isDimensional && whatState === '直营' && !item.isShow
                "
              >
                <el-table-column
                  :key="_index"
                  :prop="item.prop"
                  :label="item.label"
                  :width="item.width"
                >
                </el-table-column>
              </template>
              <!-- 二维 -->
              <template v-else-if="isDimensional">
                <el-table-column
                  v-if="item.isShow"
                  :key="_index"
                  :prop="item.prop"
                  :label="item.label"
                  :width="item.width"
                >
                </el-table-column>
              </template>
            </template>
          </el-table>
        </div>
      </div>
    </div>
    <div class="pagination_wrap">
      <div class="left_wrap">
        <el-pagination
          @size-change="handleLeftSizeChange"
          @current-change="handleLeftCurrentChange"
          :current-page="params.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="20"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <div class="rigth_wrap">
        <el-pagination
          @size-change="handleRightSizeChange"
          @current-change="handleRightCurrentChange"
          :current-page="1"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="rightSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="rightPaginationDataList.length"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 补单 -->
    <newSingle
      v-if="newSingleState"
      :rowData="rowData"
      :rightDataList="rightDataList"
      @hanldeCloseClick="hanldeCloseClick"
      @getDataList="hanldeSearch"
      :rowNo="rowNo"
    ></newSingle>
  </div>
</template>

<script>
import {
  getVipSellList,
  getVipList,
  getPersonnelList,
  getBranded,
  saveAffirm,
  deleteSell
} from '@/request/store/K_storeSalesQuery'
import { getShop } from '../../../network/shop'

import { changeDate, formatNewDate } from '@/util/util'
import newSingle from './childComp/newSingle.vue'
import cookieFn from '@/components/mixins/cookieFn'
import { getClient } from '@/network/client'
import store from 'vuex'
import { deepClone } from '../../../util/util'
import LookVipVue from '../StoreSalesNew/childComp/LookVip.vue'
import htmlToExcel from '../../../util/htmlToExcel'

export default {
  name: 'K_storeSalesQuery',
  components: {
    newSingle
  },

  mixins: [cookieFn],
  updated() {
    this.$nextTick(() => {
      this.$refs['left_table'].doLayout()
    })
    this.$nextTick(() => {
      this.$refs['right_table'].doLayout()
    })
  },
  data() {
    return {
      whatState: '',
      sdNo: null,
      params: {
        // accountType: 1, // 账号类型 0店铺 1公司
        vipSellSequence: '',
        vip: '',
        kindsNumber: '', // 款号
        personnelName: '', // 营业员
        brandedName: '', // 品牌名称
        affirm: null, // 单据状态
        startTime: '',
        endTime: '',
        directSaleNo: null, // 直营店编号
        page: 1,
        limit: 20
        // bill: '', // 小票号
        // colorName: '', // 颜色
        // customerSellSequence: '', // 客户销售序号
      }, // 请求头
      vipList: [], // vip信息
      vipPhone: '',
      personnelList: [], // 营业员
      personneValue: '',
      brandedList: [], // 品牌类型
      brandedValue: '',
      confirmList: [
        // 单据确认
        { label: '全部', value: null },
        { label: '未确认', value: 0 },
        { label: '未结账', value: 1 },
        { label: '已完成', value: 2 }
      ],

      value: '',
      dateTime: '', // 选择的时间
      tableConfig: [], // 配置右侧table
      tableConfig_1: [
        { prop: 'operator', label: '店铺', width: '120', isShow: false },
        { prop: 'vip', label: 'VIP', width: '120', isShow: false },
        { prop: 'kindsNumber', label: '款号', width: '140', isShow: false },
        { prop: 'colorName', label: '颜色', isShow: false },
        { prop: 'size', label: '尺码编号', isShow: false },
        { prop: 'number', label: '数量', isShow: false },
        { prop: 'sellPrice', label: '售价', isShow: false },
        { prop: 'discount', label: '折数', isShow: false },
        { prop: 'onePrice', label: '单价', isShow: false },
        { prop: 'money', label: '金额', isShow: false },
        { prop: 'commodityName', label: '品名', width: '160', isShow: false },
        { prop: 'brandedName', label: '品牌', width: '180', isShow: false }
      ],
      tableConfig_2: [
        { prop: 'typeNumber', label: '型号', width: '120', isShow: true },
        { prop: 'colorName', label: '颜色', isShow: true },
        { prop: 'c05', label: '05-XS', isShow: true },
        { prop: 'c07', label: '07-S', isShow: true },
        { prop: 'c09', label: '09-M', isShow: true },
        { prop: 'c11', label: '11-L', isShow: true },
        { prop: 'c13', label: '13-XL', isShow: true },
        { prop: 'c15', label: '15-2L', isShow: true },
        { prop: 'c17', label: '17-3L', isShow: true },
        { prop: 'c19', label: '19-4L', isShow: true },
        { prop: 'c21', label: '21-5L', isShow: true },
        { prop: 'c23', label: 'C23', width: '', isShow: true },
        // {prop:'f',label:'D'},
        { prop: 'f', label: 'F', isShow: true },
        { prop: 'subtotal', label: '小计', isShow: true },
        { prop: 'sellingPrice', label: '售价', isShow: true }
      ],
      dataList: [],
      leftDataList: [], // 左侧数据
      rightDataList: [], // 右侧数据
      tempRightDataList: [],
      twoInfoDataList: [], // 二维数据
      tempTwoInfoDataList: [],
      rowData: {},
      checked: false, // 二维
      newSingleState: false, // 补单、
      confirmBtnState: true, // 确认按钮状态
      SettlementState: true, // 结算按钮状态
      newSingleBtnState: true, // 补单按钮状态
      newDataState: false, // 新增资料
      invoicingState: false, // 结账
      user: '',
      customerList: [], // 店铺
      rowNo: '', // 直营店编号
      isStore: false, // 是否是直营店
      total: 0,
      rightSize: 20,
      rightPage: 20,
      rightPaginationDataList: [],
      isDimensional: false
    }
  },
  computed: {},
  created() {
    // this.getShop() // 获取当前直营店编号和名称
    this.user = this.getCookie('jxUser') // 在cookie中获取用户名字
    this.whatState = window.localStorage.getItem('whatState')
    this.isStore = window.localStorage.getItem('isStore') // 是否是直营店
    if (this.whatState === '直营') {
      this.setRightData()
    }
    this.getClient()
    this.getBranded()
    this.handelCheckbox(false)
    if (this.isStore) {
      this.rowNo = this.$store.state.currentStoreData.no
      this.params.directSaleNo = this.$store.state.currentStoreData.no
      this.getVipList()
      this.getPersonnelList()
    }
    this.getVipSellList(this.params)
  },
  methods: {
    // 导出按钮被点击的时候，导出excel表格
    exportExcel() {
      if (this.leftDataList.length === 0)
        return this.$message.warning('暂无表格数据可以导出')
      htmlToExcel.getExcel('.left_table_wrap', '店铺销售查询表格')
    },
    getList(param) {
      // console.log(this.zt)
      if (this.zt == 'null') {
        return
      } else {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          }
          const values = data.map((item) => Number(item[column.property]))
          if (
            column.property === 'number' ||
            column.property === 'money' ||
            column.property === 'preferential' ||
            column.property === 'payg' ||
            column.property === 'exchange'
          ) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index]
          }
        })
        return sums
      }
    },
    getList2(param) {
      // console.log(this.zt)
      if (this.zt == 'null') {
        return
      } else {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          }
          const values = data.map((item) => Number(item[column.property]))
          if (
            column.property === 'number' ||
            column.property === 'money' ||
            column.property === 'preferential' ||
            column.property === 'payg' ||
            column.property === 'exchange'
          ) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index]
          }
        })
        return sums
      }
    },
    // 判断是否有值
    // stateFormat(row) {
    //   let newRow = row
    //   console.log(row)
    //   let tableConfig_2 = deepClone(this.tableConfig_2)
    //   let rightDataList = deepClone(this.rightDataList)
    //   rightDataList.forEach((item, index) => {
    //     // console.log(item)
    //   })
    //   return newRow
    // },
    // 设置右侧图表显示
    setRightData() {
      this.tableConfig_1.forEach((item, index) => {
        if (item.prop === 'operator') {
          item.isShow = true
        }
      })
    },

    // 店铺选择
    changeDirectSaleNo(rowNo) {
      this.rowNo = rowNo
      this.getVipList()
      this.getPersonnelList()
    },
    // 获取店铺
    async getClient() {
      const { data } = await getClient()
      if (data && data.code === 200) {
        // console.log(data.data)
        this.customerList = data.data
      }
    },
    // 店铺销售查询
    async getVipSellList(params) {
      // return
      // console.log(params, 'params')
      const { data } = await getVipSellList(params)
      // console.log(data)
      this.leftDataList = []
      this.twoInfoDataList = []
      this.dataList = []
      this.rightDataList = []
      if (data && data.data) {
        // console.log(data.data)
        this.leftDataList = data.data.total
        console.log(data.data)
        // this.rightDataList = data.data.info
        this.twoInfoDataList = data.data.twoInfoList
        this.dataList = data.data.info
        this.total = data.total
      }
    },
    // 选择
    chooseCellClick(row, column, cell, event) {
      this.rowData = row
      this.newSingleBtnState = row && row.sequenceStatus === 0 ? false : true // 补单按钮
      this.confirmBtnState = row && row.sequenceStatus === 0 ? false : true // 确认按钮
      this.SettlementState = row && row.sequenceStatus === 4 ? false : true // 确认按钮

      // console.log(row.affirm, this.confirmBtnState)
      let rowVipSellSequence = this.rowData.vipSellSequence
      let twoInfoDataList = this.twoInfoDataList
      let dataList = this.dataList
      // console.log(dataList,"dataListdataList");
      this.rightDataList = []
      this.tempRightDataList = []
      if (!this.checked) {
        for (let i = 0; i < dataList.length; i++) {
          if (dataList[i].vipSellSequence === rowVipSellSequence) {
            this.rightDataList.push(dataList[i])
            this.tempRightDataList.push(dataList[i])
          }
        }
      } else {
        // 二维
        this.tableConfig = this.tableConfig_2
        for (let i = 0; i < twoInfoDataList.length; i++) {
          if (twoInfoDataList[i].vipSellSequence === rowVipSellSequence) {
            this.rightDataList.push(twoInfoDataList[i])
            this.tempTwoInfoDataList.push(twoInfoDataList[i])
          }
        }
      }
      // 拷贝一份数据，设置右侧分页
      this.rightPaginationDataList = deepClone(this.rightDataList)
      this.rightDataList = this.rightPaginationDataList.slice(0, this.rightPage)
    },
    // 确认
    async hanldeSaveClick() {
      let rowData = JSON.stringify(this.rowData)
      if (rowData == '{}') return
      // console.log(this.rowData)
      const { data } = await saveAffirm({
        vipSellSequence: this.rowData.vipSellSequence
      })
      if (data && data.code === 200) {
        this.$message.success(data.msg)
        this.getVipSellList(this.params) // 查询
      }
    },
    // 删除
    hanldeRowDetlete() {
      let rowData = JSON.stringify(this.rowData)
      if (rowData == '{}') return

      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          rowData = JSON.parse(rowData)
          rowData.sellTime = changeDate(rowData.sellTime)
          // console.log(rowData.sellTime)
          console.log(rowData.sellTime)
          // return
          const { data } = await deleteSell(JSON.stringify(rowData))
          if (data && data.code === 200) {
            this.$message.success(data.msg)
            this.getVipSellList(this.params) // 查询
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 查询
    hanldeSearch() {
      this.getVipSellList(this.params)
    },

    // 获取vip信息
    async getVipList() {
      const queryData = {
        directSaleNo: this.rowNo,
        limit: 9999
      }
      const { data } = await getVipList(queryData)
      // console.log(queryData, data, '获取vip信息')
      if (data.code === 200) {
        this.vipList = data.data
      }
    },
    // 查询营业员
    async getPersonnelList() {
      const queryData = {
        directSaleNo: this.rowNo,
        limit: 9999
      }
      const { data } = await getPersonnelList(queryData)
      if (data && data.code === 200) {
        this.personnelList = data.data
      }
    },
    // 获取品牌
    async getBranded() {
      const { data } = await getBranded()
      if (data.code === 200) {
        this.brandedList = data.data
      }
    },
    // 获取当前直营店编号和名称
    async getShop() {
      const { data } = await getShop()
      console.log(data)
      if (data && data.code === 200) {
        this.sdNo = data.data.headquartersNo
        this.allQuest()
      }
    },
    // 选择时间
    hanldeChangeTime(val) {
      this.params.startTime = `${val[0]} 00:00:00`
      this.params.endTime = `${val[1]} 23:59:59`
    },
    // 补单
    handleUnfoldClick() {
      let row = JSON.stringify(this.rowData)
      // console.log(this.rowData);
      if (row == '{}') return this.$message.error('请选择要补单的数据')
      if (this.checked) {
        this.rightDataList = this.tempRightDataList
      }
      this.newSingleState = !this.newSingleState
      // console.log(this.rowData, this.rightDataList)
    },
    handleLeftSizeChange(val) {
      this.params.limit = val
      this.getVipSellList(this.params)
    },
    handleLeftCurrentChange(val) {
      this.params.page = val
      this.getVipSellList(this.params)
    },
    handleRightSizeChange(val) {
      this.rightSize = val
      this.handleRightCurrentChange()
    },
    handleRightCurrentChange(val = 1) {
      this.rightPage = val
      let dataList = deepClone(this.tempRightDataList)
      let data = dataList.slice(
        (this.rightPage - 1) * this.rightSize,
        this.rightPage * this.rightSize
      )
      this.rightDataList = data
    },
    // 二维
    handelCheckbox(state) {
      if (state) {
        //二维、没有数据的不显示
        this.$nextTick(() => {
          this.tempTwoInfoDataList.forEach((item, index) => {
            this.tableConfig_2.forEach((it, idx) => {
              if (item[it.prop]) {
                it.isShow = true
              } else {
                it.isShow = false
              }
            })
          })
        })
        this.isDimensional = true
      } else {
        this.tableConfig = this.tableConfig_1
        this.isDimensional = false
      }
      this.chooseCellClick(this.rowData)
      // console.log(this.dataList)
    },
    // 关闭新增资料
    hanldeCloseNewData() {
      this.newDataState = !this.newDataState
    },
    // 关闭补单
    hanldeCloseClick() {
      this.newSingleState = !this.newSingleState
    },
    // 关闭结账
    handleCloseInvoicing() {
      this.invoicingState = !this.invoicingState
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.top_wrap {
  .store_input {
    width: 100px;
  }
  .el-select {
    .el-input {
      .el-input__inner {
        height: 32px;
      }
      .el-select__caret {
        line-height: 27px;
      }
    }
  }
  .picker_data {
    height: 32px;
    .el-icon-time {
      line-height: 27px;
    }
    .el-range-separator {
      line-height: 24px;
    }
    .el-range__close-icon {
      line-height: 27px;
    }
  }
}
.bottom_wrap {
  .el_bottom_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .right_bottom {
      display: flex;
      align-items: center;
      .tip {
        width: 15px;
        height: 15px;
        background-color: #fff;
        border-radius: 50%;
      }
      span {
        margin-right: 15px;
        margin-left: 2px;
        font-size: 14px;
      }
    }
  }
  .el_table_wrap {
    margin-top: 16px;
    display: flex;
    // height: 500px;
    .left_table_wrap {
      width: 40%;
      // height: 70vh;
      .tip_wrap {
        display: flex;
        align-items: center;
        .tip {
          width: 15px;
          height: 15px;
          background-color: #fff;
          border-radius: 50%;
          background-color: red;
          span {
            padding-bottom: 2px;
          }
        }
      }
    }
    .right_table_wrap {
      width: 59%;
      margin-left: 16px;
      // background-color: rgb(128, 51, 0);
    }
  }
}

.pagination_wrap {
  display: flex;
  justify-content: space-between;
  // background-color: chocolate;
  .left_wrap {
    width: 50%;
    margin-top: 16px;
  }
  .rigth_wrap {
    text-align: right;
    margin-top: 16px;
  }
  /deep/.el-input__inner {
    width: 100%;
  }
}
</style>
